<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
    :title="comment.reply_count ? comment.reply_count + '回复' : '暂无回复'"
    left-arrow
    @click-left="$emit('close-popup')"
    >
    </van-nav-bar>
    <div class="comment-container">
      <!-- 评论 -->
      <comment-item :comment="comment" />
      <div class="line"></div>
      <!-- 回复品论 -->
      <article-comment :list="list" :source="comment.com_id" type="c" />
    </div>
    <!-- 按钮 -->
    <div class="post-warp">
      <van-button round @click="isShow">评论</van-button>
    </div>
    <!-- 回复评论弹层 -->
      <div class="popupContainer">
        <van-popup v-model="show" position="bottom">
          <van-field
            class="post-field"
            v-model.trim="commentInputVal"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
          />
          <van-button
            class="post-btn"
            :disabled="!commentInputVal"
            @click="sendCommend"
          >发布</van-button>
        </van-popup>
      </div>
  </div>
</template>

<script>
import commentItem from '@/components/comments/commentItem.vue'
import ArticleComment from './ArticleComment.vue'
import { sendComments } from '@/api/comment.js'
// import commentReply from '@/views/Article/commentReply.vue'
export default {
  data () {
    return {
      list: [],
      show: false,
      commentInputVal: '',
      flag: true // 防抖
    }
  },
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  components: {
    commentItem,
    ArticleComment
  },
  inject: {
    articleId: {
      type: [Object, String],
      required: true
    }
  },
  methods: {
    isShow () {
      this.show = true
    },
    async sendCommend () {
      if (this.flag) {
        this.flag = false
        try {
          const { data: res } = await sendComments({
            target: this.comment.com_id + '',
            content: this.commentInputVal,
            art_id: this.articleId
          })
          console.log(res)
          this.list.unshift(res.data.new_obj)
          this.$toast('发布成功p')
          this.show = false
        } catch (err) {
          this.$toast('发布失败,请稍后再试')
        }
        this.flag = true
      }
    }
  }
}
</script>

<style scoped lang="less">
.comment-container {
  position: absolute;
  top: 92px;
  bottom: 102px;
  overflow-y: scroll;
}
.line {
  width: 750px;
  height: 2px;
  background-color: yellow;
}
.post-warp {
  width: 100%;
  height: 100px;
  position: fixed;
  background-color: rgb(70, 196, 255);
  bottom: 0;
  border-top: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  .van-button {
    width: 640px;
    height: 80px;
  }
}
.popupContainer {
  .van-popup {
    display: flex;
    align-items: center;
    .post-btn{
      border: none;
      background-color: #fff;
      border-left: 1px solid #ccc;
    }
  }
}
</style>
